<template>
  <div>
    <div class="health_search space-x-4 mt-3 mb-2 ml-2" >
      <Date-picker type="daterange" v-model="date" :options="dateOptions" placement="bottom-end" placeholder="选择日期"
                   style="width: 200px" ></Date-picker>
      <Input placeholder="请输入工号" v-model="user_id" style="width: 200px;"></Input>
      <Input placeholder="请输入部门" v-model="dept_name" style="width: 200px;"></Input>
      <Select v-model="emSymptom" style="width:200px">
        <Option v-for="(item,id) in symptomOption" :value="item.value" :key="id+2378">{{ item.label }}</Option>
      </Select>
      <Button @click="getData" type="primary">搜索</Button>
      <Button @click="reset" type="info">重置</Button>
    </div>
    <my-table :listColumns="listColumns" :listData="listData" />
  </div>
</template>
<script>
import MyTable from '@/components/Mytable.vue';
import {getAll} from "@/api/health/health";
import dayjs from "dayjs";
export default {
  name: 'healthList',
  components: {
    MyTable,
  },
  data() {
    return {
      date:[],
      listColumns: [//列表显示
        { title: '工号', key: 'userId' },
        { title: '姓名', key: 'name' },
        { title: '日期', key: 'day' },
        { title: '部门', key: 'deptName' },
        { title: '体温', key: 'temp' },
        { title: '症状', key: 'symptom' },
        { title: '备注', key: 'plusNote' },//其他症状写入备注
      ],
      user_id:null,
      dept_name:null,
      listData: [],//列表数据
      dateOptions: {//日期选择
        shortcuts: [
          {
            text: '最近一周',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: '最近一个月',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: '最近三个月',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          }
        ]
      },
      symptomOption: [
        { value: '正常', label: '无症状' },
        { value: '感冒', label: '感冒' },
        { value: '发烧', label: '发烧' },
        { value: '四肢酸痛', label: '四肢酸痛' },
        { value: '其他', label: '其他' },
      ],
      emSymptom: ''
    }
  },
  created() {
    getAll().then(res => {
      let response = res.data;
      if(response.code === 200){
        this.listData = response.data;
        this.listData.forEach(item=>{
          item.day = dayjs(item.day).format('YYYY-MM-DD');
        })

      }
    })
  },
  methods: {
    getData:function () {
      let user_id = this.user_id
      let dept_name = this.dept_name
      let emSymptom = this.emSymptom
      let params = {
        user_id:user_id,
        dept_name:dept_name,
        symptom:emSymptom
      }
      if(this.date[1]!=='' && this.date[0]!==''){
        params.start_date = dayjs(this.date[0]).format('YYYY-MM-DD')
        params.end_date = dayjs(this.date[1]).format('YYYY-MM-DD')
      }
      getAll(params).then(res => {
        let response = res.data;
        if(response.code === 200){
          this.listData = response.data;
          this.listData.forEach(item=>{
            item.day = dayjs(item.day).format('YYYY-MM-DD');
          })
        }
      })
    },
    reset:function () {
      this.user_id = null
      this.dept_name = null
      this.emSymptom = ''
      this.date = ['','']
      getAll().then(res => {
        let response = res.data;
        if(response.code === 200){
          this.listData = response.data;
          this.listData.forEach(item=>{
            item.day = dayjs(item.day).format('YYYY-MM-DD');
          })
        }
      })
    }
  }
}
</script>
<style scoped></style>